@extends('backstage.layout.master')
@section('title', '添加订单')
@section('style')
        <!-- page specific plugin styles -->
<link rel="stylesheet" href="assets/css/jquery-ui-1.10.3.custom.min.css"/>
<link rel="stylesheet" href="assets/css/chosen.css"/>
<link rel="stylesheet" href="assets/css/datepicker.css"/>
<link rel="stylesheet" href="assets/css/bootstrap-timepicker.css"/>
<link rel="stylesheet" href="assets/css/daterangepicker.css"/>
<link rel="stylesheet" href="assets/css/colorpicker.css"/>
<!-- fonts -->
<style>
.print-images {
    display: inline;
}
input[type="file"] {
    display: inline;
}
</style>
@stop
@section('content')
    <div class="breadcrumbs" id="breadcrumbs">
        <script type="text/javascript">
            try {
                ace.settings.check('breadcrumbs', 'fixed')
            } catch (e) {
            }
        </script>
        <ul class="breadcrumb">
            <li>
                <i class="icon-home home-icon"></i>
                <a href="#">主页</a>
            </li>
            <li class="active">
                <a href="backstage/create/create-order-page">订单</a>
            </li>
            <li>
                添加订单
            </li>
        </ul><!-- .breadcrumb -->
    </div>
    <div class="page-content">
        <div class="row">
            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->
                <div class="page-header">
                    <h1>
                        订单
                        <small>
                            <i class="icon-double-angle-right"></i>
                            添加订单
                        </small>
                    </h1>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <div class="form-horizontal" role="form" method="post" enctype="multipart/form-data">
                            <div class="form-group {{$errors->first('consignee')!=''?'has-error':''}}">
                                <label class="col-sm-4 control-label no-padding-right"> 收货人姓名 </label>
                                <div class="col-sm-4">
                                    <input type="text" name="consignee" value="" id="consignee" placeholder="收货人姓名" class="width-100">
                                </div>
                                <div class="col-sm-4">
                                    <div class="help-block col-xs-12 col-sm-reset inline"> {{$errors->first('consignee')}}</div>
                                </div>
                            </div>
                            <div class="form-group {{$errors->first('phone')!=''?'has-error':''}}">
                                <label class="col-sm-4 control-label no-padding-right"> 收货人联系电话 </label>
                                <div class="col-sm-4">
                                    <input type="text" name="phone" value="" id="phone" placeholder="收货人联系电话" class="width-100">
                                </div>
                                <div class="col-sm-4">
                                    <div class="help-block col-xs-12 col-sm-reset inline"> {{$errors->first('phone')}}</div>
                                </div>
                            </div>
                            <div class="form-group {{$errors->first('address')!=''?'has-error':''}}">
                                <label class="col-sm-4 control-label no-padding-right"> 收货地址 </label>
                                <div class="col-sm-4">
                                    <textarea name="address" value="" id="address" class="width-100"></textarea>
                                </div>
                                <div class="col-sm-4">
                                    <div class="help-block col-xs-12 col-sm-reset inline"> {{$errors->first('address')}}</div>
                                </div>
                            </div>
                            <div class="form-group {{$errors->first('total_fee')!=''?'has-error':''}}">
                                <label class="col-sm-4 control-label no-padding-right"> 订单实际金额 </label>
                                <div class="col-sm-4">
                                    <input type="number" name="total_fee" value="" id="total_fee" class="width-100" step="0.01"/>
                                </div>
                                <div class="col-sm-4">
                                    <div class="help-block col-xs-12 col-sm-reset inline"> {{$errors->first('total_fee')}}</div>
                                </div>
                            </div>
                            <div class="form-group {{$errors->first('total_fee')!=''?'has-error':''}}">
                                <label class="col-sm-4 control-label no-padding-right"> 订单用户备注 </label>
                                <div class="col-sm-4">
                                    <textarea class="form-control" name="message" id="message"></textarea>
                                </div>
                                <div class="col-sm-4">
                                    <div class="help-block col-xs-12 col-sm-reset inline"> {{$errors->first('total_fee')}}</div>
                                </div>
                            </div>
                            <div class="page-header">
                                <h1>
                                    订单明细
                                </h1>
                            </div>
                            <div class="table-responsive">
                                <table id="detail" class="table table-striped table-bordered table-hover">
                                    <tbody>
                                        <tr class="no-details">
                                            <td>暂无明细</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="page-header">
                                <h1>
                                    模版搜索
                                </h1>
                            </div>
                            <div class="form-group {{$errors->first('search')!=''?'has-error':''}}">
                                <label class="col-sm-4 control-label no-padding-right" for="form-field-1"> 模版选择 </label>
                                <div class="col-sm-4">
                                    <select id="search">
                                        @if(isset($temps)&& count($temps) > 0)
                                        @foreach($temps as $temp)
                                        <option value="{{isset($temp->product_temp_id) ? $temp->product_temp_id : ''}}">
                                            {{isset($temp->name) ? $temp->name : ''}}({{isset($temp->brand_name) ? $temp->brand_name : ''}})
                                        </option>
                                        @endforeach
                                        @else
                                        <option value="">占无可用模版</option>
                                        @endif
                                    </select>&nbsp
                                    <button onclick="find_product_temp()">搜索</button>
                                </div>
                                <div class="col-sm-4">
                                    <div class="help-block col-xs-12 col-sm-reset inline"> {{$errors->first('search')}}</div>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table id="search-list" class="table table-striped table-bordered table-hover">

                                </table>
                            </div>
                            <div class="clearfix form-actions">
                                <div class="col-md-offset-5 col-md-9">
                                    <button class="btn btn-info" type="button" onclick="create_order()">
                                        <i class="icon-ok bigger-110"></i>
                                        添加
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div><!-- /.col -->
                </div>
                <!-- PAGE CONTENT ENDS -->
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.page-content -->
@stop
@section('script')
<script type="text/javascript" src="/backstage/js/jquery.form.js"></script>
<script>
    function find_product_temp(){
        var product_temp_id = $("#search option:selected").val();
        if(product_temp_id == '' || product_temp_id == undefined) return ;
        $("#search-list") . html("");
        $.ajax({
            url:"/backstage/order/get-product-info",
            type:"post",
            data:{"product_temp_id":product_temp_id},
            datatype:"json",
            success:function(re){
                if(re.state=="M00000"){
                    var str = '';
                    if(re.result.temp == undefined || re.result.temp.length == 0){
                        str = '<tr><td colspan="4">暂无相关信息</td></tr>';
                    }else{
                        str = get_product_temp_str(re);
                    }
                    $("#search-list") . html(str);
                    return;
                }
                swal(re.message,'','warning');
                return;
            },
            error:function(){
                swal('系统繁忙','请稍后重试','warning');
                return;
            }
        });
    }

    function get_product_temp_str(re){
        var str = '';
        var each = re.result;
        str += '<tr>' +
                    '<td id="tempname_'+each.temp.product_temp_id+'">' +
                        each.temp.name + '(' + each.temp.brand_name + ')'+
                    '</td>' +
                    '<td>' +
                        '可选颜色 : <select id = "colour_' + each.temp.product_temp_id + '" onchange="find_size(&#39;' + each.temp.product_temp_id + '&#39;)">';
                     for(var a=0;a<each.colours.length;a++){
        str +=              '<option data="' + each.colours[a].colour_id + '" value="' + each.colours[a].colour_name + '">' +
                                each.colours[a].colour_name +
                            '</option>';
                     }
        str +=          '</select>' +
                    '</td>' +
                    '<td>' +
                        '可选尺码 : <select id = "size_' + each.temp.product_temp_id + '">';
                        for(var a=0;a<each.size.length;a++){
        str +=              '<option value="' + each.size[a] + '">' + each.size[a] + '</option>';
                        }
        str +=          '</select>'+
                    '</td>' +
                    '<td>' +
                        '<a href="javascript:;" onclick="add_product(&#39;' + each.temp.product_temp_id + '&#39;)">添加</a>' +
                    '</td>' +
                '</tr>' +
                '<tr id="position_' + each.temp.product_temp_id + '">' +
                    '<td colspan="4">' +
                        '打印信息:&nbsp';
                        for(var a=0;a<each.position.length;a++){
        str +=              each.position[a].position_name + ' <div class="print-images">' +
                                '<input type="file" id ="' +
                                each.temp.product_temp_id + each.position[a].position_type +
                                '" data="' + each.position[a].position_type + '" data-name="' +
                                each.position[a].position_name + '" name="image"' +
                                'onchange="changeToop(&#39;' +
                                each.temp.product_temp_id + each.position[a].position_type +
                                '&#39;,&#39;' +
                                each.temp.product_temp_id + '_'  + each.position[a].position_type + '_print'
                                + '&#39;,&#39;' +
                                each.temp.product_temp_id + '_'  + each.position[a].position_type + a +
                                '&#39;)"/>' +
                                '<input type="hidden" id="' +
                                each.temp.product_temp_id + '_'  + each.position[a].position_type +
                                '_print" value="">' +
                            '</div>&nbsp';
                        }
        str +=      '</td>' +
                '</tr>';

        return str;
    }

    function find_size(th){
        var colour_id = $("#colour_" + th + " option:selected").attr("data");
        $("#size_"+th) . html('');
        $.ajax({
            url:"/backstage/order/find-size",
            type:"post",
            data:{"product_temp_id":th,"colour_id":colour_id},
            datatype:"json",
            success:function(re){
                if(re.state=="M00000"){
                    var str = '';
                    for(var a=0;a<re.result.size.length;a++){
                        str += '<option value="' + re.result.size[a] + '">' + re.result.size[a] + '</option>';
                    }
                    $("#size_"+th) . html(str);
                    var each = re.result;
                    var position = '<td colspan="4">' +
                                        '打印信息:&nbsp';
                                    for(var a=0;a<each.position.length;a++){
                    position +=         each.position[a].position_name + ' <div class="print-images">' +
                                        '<input type="file" id ="' +
                                        th + each.position[a].position_type +
                                        '" data="' + each.position[a].position_type + '" data-name="' +
                                        each.position[a].position_name + '" name="image"' +
                                        'onchange="changeToop(&#39;' +
                                        th + each.position[a].position_type +
                                        '&#39;,&#39;' +
                                        th + '_'  + each.position[a].position_type + '_print'
                                        + '&#39;,&#39;' +
                                        th + '_' + each.position[a].position_type + a +
                                        '&#39;)"/>' +
                                        '<input type="hidden" id="' +
                                        th + '_' + each.position[a].position_type +
                                        '_print" value="">' +
                                        '</div>&nbsp';
                                    }
                    position +=     '</td>';

                    $("#position_"+th) . html(position);
                    return;
                }
                swal(re.message,'','warning');
                return;
            },
            error:function(){
                swal('系统繁忙','请稍后重试','warning');
                return;
            }
        });
    }

    function changeToop(fileName,imageName,upName){
        $("#"+fileName).wrap("<form id='"+upName+"' action='/backstage/img/save'  method='post' enctype='multipart/form-data'></form>");
        $("#"+upName).ajaxSubmit({
            dataType:  'json',
            success: function(data) {
                console.log(data.image_url);
                if(data.state == 1){

                    $("#"+imageName).val(data.image_url);
                }else{
                    alert(data.message);
                }
            },
            error:function(xhr){    alert("上传失败");    }
        });
    }

    function add_product(th){
        var colour = $("#colour_" + th + " option:selected").val();
        var preview_images = get_previrew_images_str(th);

        $.ajax({
            url:"/backstage/products/create-product",
            type:"post",
            data:{"product_temp_id":th,"colour_name":colour,"preview_images":preview_images},
            datatype:"json",
            success:function(re){
                if(re.state=="M00000"){

                    var str = '';
                    $str = get_product_str(th,re.result);
                    $("#detail").append(str);
                    return;
                }
                swal(re.message,'','warning');
                return;
            },
            error:function(){
                swal('系统繁忙','请稍后重试','warning');
                return;
            }
        });
    }
    function get_previrew_images_str(th){
        var str = '[';

        $("#position_" + th + " .print-images").each(function(){
            var preview_image = $(this).find("input[type=hidden]").val();
            var position_type = $(this).find("input[type=file]").attr("data");
            if(preview_image != "" && preview_image != undefined){
                str += '{"preview_image":"' + preview_image +
                       '","position_type":' + position_type + '},';
            }
        });
        if(str.length > 1){
            str = str.substring(0,str.length-1);
        }
        str += ']';
        return str;
    }
    function get_product_str(th,re){
        $('#detail tbody .no-details').remove();
        var tempname = $('#tempname_'+th).html();
        var colour = $("#colour_" + th + " option:selected").val();
        var size = $("#size_"+th+ " option:selected") . val();
        var position_print = "";
        $("#position_" + th + " .print-images").each(function(){
            var preview_image = $(this).find("input[type=hidden]").val();
            var position_name = $(this).find("input[type=file]").attr("data-name");
            if(preview_image != "" && preview_image != undefined){
                position_print += position_name+": <img style='width:100px;' src='"+preview_image+"'>";
            }else{
                position_print += position_name+": ";
            }
        });
        var str = ' <tr class="order-detail" id="detail_' + re.product_id + '">'+
                '<td>'+tempname+'<input type="hidden" class="product_ids" value="'+re.product_id+'"></td>'+
                '<td>产品编号:' + re.product_id + '</td>' +
                '<td>颜色 :<input type="text" id="color_'+re.product_id+'" disabled value="'+colour+'"></td>'+
                '<td>尺码 :<input type="text" id="size_'+re.product_id+'" disabled value="'+size+'"></td>'+
                '<td>数量 :<input type="number" name="num" min="1" value="1" step="1" placeholder="数量" class="width-10"></td>'+
                '<td>单价 :'+re.preferential_price+'</td>'+
                '</tr>'+
                '<tr id="image_' + re.product_id + '">'+
                '<td>预览图<img src="' + re.product_preview_image + '" width="200px"/>' + '</td>' +
                '<td colspan="4">'+
                '打印信息 :'+ position_print+
                '</td>'+
                '<td>'+
                    '<a onclick="delproduct(&#39;'+ re.product_id +'&#39;)">删除</a>'+
                '</td>'+
                '</tr>';
        $('#detail tbody').append(str);
        $('#search-list').empty();
        return str;
    }
    function create_order(){
        var consignee = $("#consignee").val();
        if(consignee == '' || consignee == undefined){
            swal('请填写收货人姓名','','warning');
            return ;
        }
        var phone = $("#phone").val();
        if(phone == '' || phone == undefined){
            swal('请填写收货人联系电话','','warning');
            return ;
        }
        var address = $("#address").val();
        if(address == '' || address ==undefined){
            swal('请填写收货地址','','warning');
            return ;
        }
        var total_fee = $("#total_fee").val();
        if(total_fee == '' || total_fee ==undefined){
            swal('请填写订单金额','','warning');
            return ;
        }
        var detail = get_order_detail_str();console.log(detail);
        if(detail == ''){
            swal('请添加订单详情','','warning');
            return ;
        }
        var message = $("#message").val();

        $.ajax({
            url:"/backstage/order/create-order",
            type:"post",
            data:{"consignee":consignee,"phone":phone,"address":address,"total_fee":total_fee,"detail":detail,'message':message},
            datatype:"json",
            success:function(re){
                if(re.state=="M00000"){
                    swal(re.message,'','success');
                    window.location.href="/backstage/order/order-detail?order_id=" + re.result.order_id;
                    return;
                }
                swal(re.message,'','warning');
                return;
            },
            error:function(){
                swal('系统繁忙','请稍后重试','warning');
                return;
            }
        });
    }
    function get_order_detail_str(){
        var str = '';
        $(".order-detail").each(function(){
            var product_id = $(this).find(".product_ids").val();
            var colour_name = $(this).find("#color_" + product_id).val();
            var size_name = $(this).find("#size_" + product_id).val();
            var quantity = $(this).find("input[type=number]").val();
            if((product_id != "" && product_id != undefined) &&
                (colour_name != "" && colour_name != undefined) &&
                (size_name != "" && size_name != undefined) &&
                (quantity != "" && quantity != undefined)){
                str += '{"product_id":"' + product_id +
                       '","colour_name":"' + colour_name + '",' +
                       '"size_name":"' + size_name + '",' +
                       '"quantity":' + quantity + '},';
            }
        });
        if(str.length > 1){
            str = str.substring(0,str.length-1);
            return '[' + str + ']';
        }else{
            return '';
        }
    }
    function delproduct(th){
        $("#detail_" + th).remove();
        $("#image_" + th).remove();
    }
</script>
@stop
